<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :width="setDialogWidth('800px')"
    :visible="visible"
    :title="$t('AOCC_DEVICE_STATUS')"
    @open="open"
    @close="close"
  >
    <TypeTitle :title="$t('BASIC_INFO')" />
    <el-form :model="formData" class="flex flex-wrap pr-40" label-width="auto">
      <el-form-item :label="$t('BELONGS_REGION_STATION_NAME')" class="w-50">
        <el-input v-model="rowData.stationName" readonly />
      </el-form-item>
      <el-form-item :label="$t('DEVICE_NAME')" class="w-50">
        <el-input v-model="rowData.deviceName" readonly />
      </el-form-item>
      <el-form-item :label="$t('DEVICE_CODE')" class="w-50">
        <el-input v-model="rowData.deviceId" readonly />
      </el-form-item>
      <el-form-item :label="$t('CABINET_TEMPERATURE')" class="w-50">
        <el-input v-model="formData.temperature" readonly />
      </el-form-item>
      <el-form-item :label="$t('BATTERY_VOLTAGE')" class="w-50">
        <el-input v-model="formData.voltage" readonly />
      </el-form-item>
      <el-form-item :label="$t('REMAIN_POWER')" class="w-50">
        <el-input v-model="formData.remainingPower" readonly />
      </el-form-item>
      <el-form-item :label="$t('PROTECT_TEMPERATURE_THERSHOLD')" class="w-50">
        <el-input v-model="formData.lowTemperatureWarmUpProtectThs" readonly />
      </el-form-item>
      <el-form-item :label="$t('SOLAR_CURRENT')" class="w-50">
        <el-input v-model="formData.rechargingCurrent" readonly>
          <template slot="append">{{ $t('RECHARG_STATUS_3') }}</template>
        </el-input>
      </el-form-item>
      <TypeTitle :title="$t('THR_SET')" />
      <el-form-item :label="$t('PROTECT_POWER_THRESHOLD')" class="w-50">
        <el-input v-model="formData.protectPowerThs" readonly />
      </el-form-item>
      <el-form-item :label="$t('PROTECT_VOLTAGE_THRESHOLD')" class="w-50">
        <el-input v-model="formData.protectPowerVoltageThs" readonly />
      </el-form-item>
      <el-form-item :label="$t('ENTER_LOW_POWER')" class="w-50">
        <el-input v-model="formData.lowPowerTimeThs" readonly />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="close">{{ $t('CLOSE') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import aoccConfigApi from '@/api/afs/AoccConfigApi'
  import { deepClone } from '@/utils/common'
  import TypeTitle from '@/components/TypeTitle.vue'

  export default {
    components: { TypeTitle },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      rowData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        formData: {},
        signalId: {
          protectPowerThs: 'protectPower', // 自动保护电量阈值
          protectPowerVoltageThs: 'protectPowerVoltage', // 自动保护电压阈值
          lowPowerTimeThs: 'lowPowerTime' // 多久进入低功耗模式
        }
      }
    },
    methods: {
      open() {
        console.log('this.rowData', this.rowData)
        this.formData = deepClone(this.rowData.aoccStatusDataDto)
      },
      // 保存逻辑网段修改
      save() {
        const obj = {}
        for (const key in this.signalId) {
          if (Object.hasOwnProperty.call(this.signalId, key)) {
            const element = this.signalId[key]
            const signalKey = this.formData[element]
            const signalValue = this.formData[key]
            const originSignalValue = this.rowData.aoccStatusDataDto[key]
            // 只有被用户修改的阈值才传递给后端
            // 存在signalId且值被改变了
            if (signalKey && Number(signalValue) !== Number(originSignalValue)) {
              obj[signalKey] = signalValue
            }
          }
        }
        if (!Object.keys(obj).length) {
          return
        }
        aoccConfigApi.bathUpdateThreshold(obj)
          .then(res => {
            if (res) {
              this.$message.success(this.$t('SAVE_SUCCESS'))
              this.close(true)
            } else {
              this.$message.error(this.$t('SAVEFAILED'))
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      close(load) {
        this.$emit('close', load)
      }
    }
  }
</script>

<style scoped></style>
